import { createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
// import Home from '../views/Home.vue'
// import About from '../views/About.vue'
// createMemoryHistory 用于SSR,服务器端渲染

// 路由的懒加载,当路由被访问的时候，才加载对应的组件
const Home = () => import(/* webpackChunkName: 'home' */'../views/Home.vue') // 这是webpack的魔法注释，用于代码分割，将代码分割成不同的块，然后按需加载
// const About = () => import(/* webpackChunName: 'about' */'../views/About.vue')

// 创建路由:映射关系
const router = createRouter({
  // 使用hash模式
  history: createWebHashHistory(),
  // history模式
  // history: createWebHistory(),
  routes: [
    // {path: '/', component: Home},
    {
      path: '/', 
      redirect: '/home'

    },{
      name: 'home',  // 路由的名字,名字唯一,用于编程式导航,比如router.push({name: 'home'}),这样就可以直接跳转到home路由了,而不需要知道具体的path
      path: '/home', 
      component: Home,
      meta: {
        title: '首页',
        isShow: true
      },
      children: [
        {
          path: '/home',
          redirect: '/home/recommend'
        },
        {
          path: 'recommend', // 子路由的path不需要加/,相当于/home/recommend
          component: () => import('../views/HomeRecommend.vue')
        },
        {
          path: 'ranking',
          component: () => import('../views/HomeRanking.vue')
        }
      ]
    },{
      name: 'about',
      path: '/about', 
      component: () => import('../views/About.vue') // 这种也会分包和懒加载
    }, {
      path: '/user/:id',
      component: () => import('../views/User.vue')
    },{
      path: '/:pathMatch(.*)*',
      component: () => import('../views/NotFund.vue')
    },{
      path: '/order',
      component: () => import('../views/Order.vue')
    },{
      path: '/login',
      component: () => import('../views/Login.vue')
    }
  ]
})

// 动态添加路由
let isAdimin = true // 模拟一个权限判断,如果用户是admin,则可以添加路由,访问admin页面,否则跳转到404页面
if (isAdimin) {
  router.addRoute({
    path: '/admin', // 动态添加一级路由
    component: () => import('../views/Admin.vue')
  })
  // 动态添加二级路由,vip页面,只有admin页面才能访问
  router.addRoute('home', {
    path: 'vip',
    component: () => import('../views/HomeVIP.vue')
  })
  // 由于home已经存在,这里再添加home,就会导致之前的home被覆盖
  // router.addRoute({
  //   path: '/home',
  //   component: () => import('../views/About.vue'),
  // })
}
// 打印 路由表
console.log(router.getRoutes())

// 路由导航守卫
// 进行任何路由跳转之前,传入beforeEach中的函数都会被调用
router.beforeEach((to, from) => {
  console.log('beforeEach========================')
  console.log("to==>  ",to)
  console.log("from==> ", from)
  // 1. 进入任何页面时都跳转到login页面
  // if (to.path !== '/login'){
    // return '/login'
    // return false // 这会阻止所有非/login路由的导航
    // return {
    //   path: '/login',
    //   query: {
    //     name: 'why',
    //     age: 18
    //   }
    // }

  // }



  // 2. 需求: 进入到订单(order)页面之前,先判断用户是否登录(isLogin -> LocalStorage保存token),如果登录了,则可以进入,否则跳转到登录页面
  // 情况一: 用户没有登录,跳转到登录页面
  // 情况二: 用户已经登录,可以正常访问
  const token = localStorage.getItem('token')
  // 如果没有token,并且要进入的页面是order,则跳转到login页面
  if (to.path === '/order' && !token) {
    return '/login'
  }




})

export default router